<template>
	<view style="display: flex;align-items: center;padding:0rpx 20rpx;font-size: 24rpx;">
		<view>时间范围：</view>
		<uni-datetime-picker class="time-range" v-model="datetimerange" type="daterange" rangeSeparator="至" />
	</view>
	<view
		style="display: flex;align-items: center;justify-content: space-between;padding:0rpx 20rpx;font-size: 24rpx;gap:10rpx">

		<uni-data-select style="flex:1" :localdata="alarmOptions" v-model="searchOption.code" @change="change"></uni-data-select>

		<view style="display: flex;gap:10rpx">
			<button class="btn" size="mini" @click="findAll">查询</button>
			<button class="btn" size="mini" @click="restAll">重置</button>
		</view>
	</view>
	<view style="height: 30rpx;"></view>
	<uni-list class="list">
		<uni-list-item v-for="item in events" :key="item">
			<template #header>
				<view class="list" style="width: 100%;">{{item.node==='-'?'当前设备':item.node}}</view>
			</template>
			<template #body>
				<view class="list">
					<text
						:style="{backgroundColor:'orange',color:'#fff',padding:'0rpx 20rpx',borderRadius:'10rpx'}">{{item.info}}</text>
				</view>

			</template>
			<template #footer>
				<view class="list" style="text-align: right;width: 100%;">
					{{item.alarmtime}}
				</view>
			</template>
		</uni-list-item>
	</uni-list>
</template>

<script setup>
	import {
		ref,
		watch,
		onMounted,
		reactive
	} from 'vue';
	import {
		getAlarmList,getAlarmType
	} from "@/api/wuLian.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const options = ref({})
	onLoad((option) => {
		options.value = option
		console.log(option,55)
		searchOption.mac = option.mac
		getList()
	})

	const searchOption = reactive({
		start_time: '',
		end_time: "",
		mac: '',
		code: ''
	})

	function findAll(){
		console.log(datetimerange.value,67)
		searchOption.start_time = datetimerange.value[0]
		searchOption.end_time = datetimerange.value[1]
		getList()
	}
	
	

	function getList() {
		getAlarmList(searchOption).then(e=>{
			console.log(e,68)
			events.value =e.data.list
		})
	}
	
	function restAll(){
		searchOption.start_time = ""
		searchOption.end_time =""
		searchOption.code=""
		getList()
	}
	const alarmOptions = ref([])
	function getOption(){
		getAlarmType().then(e=>{
			console.log(e,75)
			alarmOptions.value = e.data.map(item=>{
				return {value:item.id,text:item.type_name}
			})
		})
	}
	getOption()
	// 定义数据
	const single = ref('');
	const datetimesingle = ref('');

	const datetimerange = ref([]);
	const start = ref(Date.now() - 1000000000);
	const end = ref(Date.now() + 1000000000);

	// 定义方法


	const changeLog = (e) => {
		console.log('change事件:', e);
	};

	const maskClick = (e) => {
		console.log('maskClick事件:', e);
	};



	// 定义生命周期钩子
	onMounted(() => {
		setTimeout(() => {
			datetimesingle.value = Date.now() - 2 * 24 * 3600 * 1000;
			single.value = '2025-2-12';
			datetimerange.value = ["2025-03-08 0:01:10", "2025-03-28 23:59:59"];
		}, 3000);
	});


	// 定义数据
	const value = ref(0);
	const range = ref([{
			value: 0,
			text: "全部"
		},
		{
			value: 1,
			text: "办公"
		},
		{
			value: 2,
			text: "五楼"
		},
	]);

	// 定义方法
	const change = (e) => {
		console.log("e:", e);
	};
	// 事件记录数据
	const events = ref([{
			name: '五楼照明总闸',
			statusText: '分闸警示',
			statusClass: 'green',
			time: '2025-01-05 12:00'
		},
		{
			name: '办公区域1照明',
			statusText: '合闸警示',
			statusClass: 'red',
			time: '2025-01-04 12:00'
		},
		{
			name: '办公区域2照明',
			statusText: '异常分闸',
			statusClass: 'orange',
			time: '2025-01-03 12:00'
		},
		{
			name: '办公区域3照明',
			statusText: '过流告警',
			statusClass: 'orange',
			time: '2025-01-02 12:00'
		},
		{
			name: '办公区域4照明',
			statusText: '短路跳闸',
			statusClass: 'red',
			time: '2025-01-01 12:00'
		}
	]);
</script>

<style scoped>
	.list {
		font-size: 24rpx;
		width: 100%;
	}

	.btn {
		background-color: #E60012;
		color: #fff;
	}
</style>